<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>数字人合成</text>
		</view>
		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 数字人合成</text>
		</view>
		<view class="margin-bottom_30rpx">

		</view>
	

		<block v-if="current==1">
			<view class="margin-top_50rpx ">

				


				
					<view class="list-public margin-top_30rpx">
<view class="margin-bottom_20rpx font-weight_bold textareaTitle flex-between">
								<view class="" style="font-size:34rpx">
									选择数字人
									<span class="red-dot">*</span>
								</view> 
												
												
							</view>
						<view class="flex width100 relative " v-if="!videoShowUrl">
							<!-- <image @click.stop="videoUpload()" mode="widthFix" class="upload-img-cls" :src="szrImgBj"
								style="height: 1116.28rpx;"></image> -->
								
							


							<view @click.stop="videoUpload()" class="upload-img-cls bordColor" style="width: 676rpx;height: 460rpx;">

							</view>





							<view class="upload-bj-cls flex-column">
								<uni-icons type="plusempty" size="30"></uni-icons>
								<view>请选择形象</view>
								<text>点击选择已有的数字人形象</text>
							</view>


						</view>
						<view class="margin-bottom_30rpx" v-else>

							<scroll-view @scrolltolower="nextPage" scroll-view scroll-with-animation='true'
								class="scroll-view_H" scroll-x="true">
								<view id="im_0" class="bottom"></view>
								<!-- <block v-for="(item,index) in imageList" :key="index"> -->
								<view class="scroll-view-item_H flex-start-center">

									<view class=" " style="position: relative;" v-for="(item,index) in digitalHumanArr"
										:key="index">
										<image class="digitalHumanImg" :src="item.video_cover" mode="aspectFill">
										</image>

										<image @click="delDh(index)" class="delImg" :src="nine3419" mode="aspectFill">
										</image>
									</view>


								</view>



							</scroll-view>

							<view class="flex margin-top_30rpx" @click.stop="videoUpload()">
								<image style="height: 32rpx; width: 32rpx;margin-right: 10rpx;" :src="nine3420" mode="">
								</image>
								重新选择模版
							</view>





						</view>

						<view class="flex-between-start" v-if="isEmptyAiTimbreObj">
							<view class="margin-top_30rpx AiDubbing flex-column" @click="aITimbre()">
								<image class="aiDubbingImg margin-bottom_20rpx" :src="group3184" mode=""></image>
								<text>AI配音</text>

							</view>

						</view>



					</view>
					
					<view class="videoCopywriting">
						
					
						<view class="textarea-box ">
							<textarea placeholder-style="font-size:30rpx" v-model="form.content" placeholder="请填写你的文案"
								maxlength="500" style="margin-top:70rpx;background-color: #F8F8F8;padding: 20rpx 0 20rpx 10rpx;20rpx;border-radius: 20rpx;margin-left: -4rpx;" />
					
							<view class="margin-bottom_20rpx font-weight_bold textareaTitle flex-between">
								<view class="" style="font-size:34rpx">
									视频文案
									<span class="red-dot">*</span>
								</view> 
					
					
							</view>
							<view class="flex-start-center textareaTitles" @click="paste(form.content)">
								<view style="color: #999999;">复制</view>
								<image class="copyImg margin-left_10rpx" :src="copyTwo" mode="widthFix"></image>
					
					
							</view>
					
					
						</view>
					
					
					
					
					
					</view>


					


			
				
				<view class="list-public" v-if="tabIndex==3&&!isEmptyAiTimbreObj">
					<view class="font-weight_bold margin_25rpx_0" style="font-size: 34rpx;">
						我的音色
					</view>
					<view class="backgroundMusic flex-between ">
						<view class="flex-align-center">
							<view class="" @click="trialListeningsTimbre(aiTimbreObj.voiceUrl,'ck')">
								<image v-if="isPlayTimbre==1" class="musicImg" :src="group3199" mode=""></image>
								<image v-else class="musicImg" :src="group3198" mode=""></image>
				
				
							</view>
				
							<view class="flex-columns margin-left_16rpx">
								<view class="r-name">{{ aiTimbreObj.name }}</view>
								<!-- <view class="r-date">{{item.second}}|{{ item.createTime }}</view> -->
				
								<view class="r-date" v-if="aiTimbreObj.duration">
				
									{{(aiTimbreObj.duration?aiTimbreObj.duration:0).toFixed(2)}}秒
				
								</view>
							</view>
						</view>
				
						<view class="changeMusic flex" @click="aITimbre()">
							<image class="musicImg" :src="group3360Sever" mode=""></image>
							<text>更换配音</text>
						</view>
				
						<!-- <view class="flex-align-center try-listening-cls" >
							<iamge></iamge>
							<view style="color: #fff;">试听</view>
						</view> -->
					</view>
				</view>
				
				




			</view>

		</block>
		<block v-if="current==2">
			<view class="videoStyle margin-top_30rpx" style="">
				<view class="flex-between margin-top_30rpx">
					<view class="">
						视频标题
					</view>
					<view class="">
						<switch v-model="form.title_open" style="transform:scale(0.7)" :checked="form.title_open"
							color="#9235FF" @change="e=>switch1Change(e,1)" />
					</view>
				</view>
				<view class="videoTitle flex-align-center" style="padding-left: 16rpx;" v-if="form.title_open">
					<input v-model="form.title_value" class="" focus placeholder="请输入视频标题" />
				</view>
				<view class="flex-between margin-top_30rpx">
					<view class="">
						视频转场
					</view>
					<view class="">
						<switch v-model="form.transitions_open" style="transform:scale(0.7)" color="#9235FF"
							:checked="form.transitions_open" @change="e=>switch1Change(e,2)" />
					</view>
				</view>
				<scroll-view @scrolltolower="nextPage" :scroll-y="true" style="height: 400rpx;"
					v-if="form.transitions_open">
					<view class="flex-wrap-flex-start-center">
						<view class="   flex" v-for="(item,index) in transitionList " :key="index"
							:style="(index + 1) % 4 === 0 ? 'margin: 0 0rpx 20rpx 0' : ''"
							:class="tiePaperActive==index ?'tiePaperActive ':'tiePaper'"
							@click="tiePaperSwitchFn(index,item)">
							<image class="tiePaperImg" :src="item.url" mode=""></image>

						</view>


					</view>
				</scroll-view>

				<view class="flex-between margin_40rpx_0">
					<view class="">
						视频帖纸
					</view>
					<view class="">
						<switch v-model="form.sticker_open" style="transform:scale(0.7)" :checked="form.sticker_open"
							color="#9235FF" @change="e=>switch1Change(e,3)" />
					</view>
				</view>

				<scroll-view @scrolltolower="nextPage" :scroll-y="true" style="height: 400rpx;"
					v-if="form.sticker_open">
					<view class="flex-wrap-flex-start-center">
						<view class="   flex" v-for="(item,index) in stickersList " :key="index"
							:style="(index + 1) % 4 === 0 ? 'margin: 0 0rpx 20rpx 0' : ''"
							:class="stickerActive==index ?'tiePaperActive ':'tiePaper'"
							@click="stickerSwitchFn(index,item)">
							<image class="tiePaperImg" :src="item.stickersUrl" mode=""></image>

						</view>


					</view>
				</scroll-view>

				<view class="flex-between margin_40rpx_0">
					<view class="">
						标题字幕样式
					</view>
					<view class="">
						<switch v-model="form.caption_open" style="transform:scale(0.7)" :checked="form.caption_open"
							color="#9235FF" @change="e=>switch1Change(e,4)" />
					</view>
				</view>
				<scroll-view :scroll-y="true" style="height: 500rpx;width: 700rpx" v-if="form.caption_open">

					<view class="flex-wrap-flex-start-center">
						<view class="" v-for="(item,index) in captionList " :key="index"
							@click="titleStyleSwitchFn(index,item)">
							<image :class="titleStyleActive==index?'titleStyleActive':'templateCenterImg'"
								:src="item.url" mode=""></image>

						</view>
					</view>

				</scroll-view>

				<view class="" style="height: 20rpx;">

				</view>




			</view>

		</block>
		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>编辑镜头名称</text>
						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="card margin-bottom_50rpx">
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" type="text" v-model="selIndexName" placeholder="请输入镜头名称" />

							</view>


						</view>

					</view>

					<view class="PublishTags flex" @click="payNow()">
						确定
					</view>

				</view>

			</template>
		</sunui-popup>

		<sunui-popup ref="videoNum">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>视频数量</text>
						<uni-icons @click='closeVideoNum()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>
					<view class="flex-between margin-top_30rpx margin-bottom_30rpx">
						<text class="font-weight_bold">当前算力：{{user.balance}}</text>
						<view class="" @click="goRecharge()" v-if="Number(user.balance<=0)&&memberSetObj.is_open==1">

							<text style="color: 333333;font-size: 33rpx;color: #6475FF;"> 去充值</text>
							<uni-icons style="margin-top: 7rpx;" color="#6475FF" type="right" size="17"></uni-icons>
						</view>
					</view>

					<view class="card margin-bottom_50rpx">
						<text class="font-weight_bold padding_20rpx_0">任务名称 *</text>
						<view class="myNmae">
						
							<view class="">
								<input class="uni-inputsa" type="text"
									v-model="form.name" placeholder="请输入任务名称" />
							</view>
						
						
						</view>
						<text class="font-weight_bold padding_20rpx_0">视频数量 *</text>
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" type="number" @input="keyWorderInput(form.video_count)"
									v-model="form.video_count" placeholder="请输入视频数量" />
							</view>


						</view>
						

					</view>

					<view class="font-size_26rpx padding-bottom_40rpx">
						提示：建议最大生成{{videoNum}}个视频 (不可超过当前最大数量)
					</view>

					<view class="PublishTags flex" @click="videoNumBtn()">

						提交任务 {{'('+"算力："+(tallyHotspot_tally).toFixed(2)+')'}}
					</view>

				</view>

			</template>
		</sunui-popup>
		<view class="" style="height: 200rpx;">

		</view>
		<view class="bgBtn">
			<view class="c-save flex" v-if="current==0" @click="navBack()">
				保存退出
			</view>
			<view class="c-save flex" @click="zpFn()">
				<image class="videoImg" :src="videoFour" mode=""></image>
                  作品
			</view>
			<view v-if="current!=2" class="c-but flex" @click="but(current)">
				{{(tabIndex==3)? current==1?'提交数字人口播 ':'下一步':'下一步'}}
			</view>
			<view v-else class="c-but flex" @click="CbutCk()">确定</view>
		</view>




	</view>
</template>

<script>
	const innerAudioContext1 = uni.createInnerAudioContext();
	const innerAudioContext2 = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				videoShowUrl: false,
				copywriting: '',
				digitalHumanArr: [],
				videoFour:this.$imgs.videoFour,
				del: this.$imgs.del,
				nine3419: this.$imgs.nine3419,
				nine3420: this.$imgs.nine3420,
				group3186: this.$imgs.group3186,
				group3198: this.$imgs.group3198,
				group3177: this.$imgs.group3177,
				group3188: this.$imgs.group3188,
				group3189: this.$imgs.group3189,
				copyTwo: this.$imgs.copyTwo,
				group3197: this.$imgs.group3197,
				group3184: this.$imgs.group3184,
				group3199: this.$imgs.group3199,
				group3185: this.$imgs.group3185,
				group3190: this.$imgs.group3190,
				group3187: this.$imgs.group3187,
				tiePaperTwo: this.$imgs.tiePaperTwo,
				group21: this.$imgs.group21,
				group3360Sever: this.$imgs.group3360Sever,
				group3359Sever: this.$imgs.group3359Sever,
				tallySet: uni.getStorageSync('tallySet'),
				user: uni.getStorageSync('user'),



				showMusic: false,

				groupList: [{
					id: 26,
					groupName: '测试'

				}],

				videoTransitions: false,

				titleStyle: true,

				tabIndex: 3,
				navTop: '',
				materialBg: this.$imgs.violet,
				// materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				matrix20: 'https://yuntt.weijuyunke.com/yunttXcxImage/matrix/20.png',
				current: 1,
				// 1.播放 2.停止播放
				isPlay: 2,
				// 1.播放 2.停止播放
				isPlayVideo: 2,
				// 1.播放 2.停止播放
				isPlayTimbre: 2,

				multiLensList: [{
					id: 0,
					name: ''
				}],
				tiePaperActive: 0,
				titleStyleActive: 0,
				stickerActive: 0,
				aiDubbingObj: {},
				musicObj: {},
				singleLensObj: {},
				queryPage: {
					psize: 10,
					page: 1

				},
				total: 20,
				stickersList: [],
				captionList: [],
				transitionList: [],
				videoNum: '',
				tallyHotspot_tally: 0,


				form: {
			
					uid: uni.getStorageSync('uid'),
					// 文案内容
					content: '',
					name:'',
				
				
					// 视频数量
					video_count: '',
					

					// 数字人形象id 用英文逗号,拼接
					avatar_id: '',
					// 数字人音色id
					voice_id: '',
					// 数字人声音id
					sound_id: ''

				},

				copyTypeInfo: {},
				previewUrl: '',
				selIndex: '',
				selIndexName: '',

				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",

				aiTimbreObj: {},
				avatarIdArr: [],
				stMusicUrl: '',
				memberSetObj: {},

				demoDub_url: false,
				testContent: ['秋天的公园里，落叶铺满了小路，踏上去有种说不出的舒爽，偶然间抬头，那抹深秋的蓝天格外高远、明净。'],






			}
		},
		computed: {
			isEmptyAiDubbingObj() {
				return Object.keys(this.aiDubbingObj).length === 0;
			},

			isEmptyAiTimbreObj() {
				return Object.keys(this.aiTimbreObj).length === 0
			}

		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		onLoad(options) {
			const app = getApp();
			this.navTop = app.globalData.navTop;
		
		
			this.userInfos()
			this.memberSetFn()
			this.createdgetSystemInfo()
			// console.log(options) JSON.parse(decodeURIComponent(options.obj))



			if (options.objs) {
				
				this.copyTypeInfo = JSON.parse((decodeURIComponent(options.objs)));
				
				
				this.$sun.assignObject(this.form, {
					...this.copyTypeInfo
				})
				
				this.form.is_submit = 1
				this.form.type = 3
				if (this.form.caption_value) {
					this.form.caption_value = JSON.parse(this.form.caption_value)
				}
				
				
				if (this.form.mode == 0) {
					this.form.mode = 1
				}
				
				
				
				if (this.form.mode == 1) {
					this.form.lens_str = []
					this.folderPageFn()
				} else if (this.form.mode == 2) {
				
				
					this.multiLensList = JSON.parse(JSON.stringify(this.form.lens_str))
				
					this.folderPageFn(this.multiLensList)
				
				} else {
					this.avatarListFn()
				}
				
				
				
				if (!this.form.dub) {
					this.aiDubbingObj = {}
				}
				
				if (this.form.video_count) {
					this.tallyHotspot_tally = Number(this.tallySet.figure_tally) * Number(this.form.video_count)
				} else {
					this.tallyHotspot_tally = Number(this.tallySet.figure_tally)
				}
				
				if (this.form.mode == 3) {
					if (this.form.dub_url) {
						this.aiTimbreObj.voiceUrl = this.form.dub_url;
					}
					if (this.form.dub_voice) {
						this.aiTimbreObj.name = this.form.dub_voice;
					}
				
				
				
				
				
				
				
				
					this.$nextTick(() => {
						setTimeout(() => {
							if (this.aiTimbreObj.voiceUrl) {
				
								innerAudioContext1.src = this.aiTimbreObj.voiceUrl;
								console.log(innerAudioContext1.duration)
								this.$set(this.aiTimbreObj, 'duration', innerAudioContext1.duration);
							}
				
						}, 500)
					})
				} else {
					if (this.form.dub_url) {
						this.aiDubbingObj.voiceUrl = this.form.dub_url;
					}
				
					if (this.form.dub_voice) {
						this.aiDubbingObj.voiceName = this.form.dub_voice;
					}
				
				
				
				
				
					this.$nextTick(() => {
						setTimeout(() => {
							if (this.aiDubbingObj.voiceUrl) {
								innerAudioContext1.src = this.aiDubbingObj.voiceUrl;
								console.log(innerAudioContext1.duration)
								this.$set(this.aiDubbingObj, 'duration', innerAudioContext1.duration);
							}
				
				
						}, 1500)
					})
				}
				
				if (this.form.mode != 3) {
					this.musicBgm()
				}
				console.log(this.multiLensList)
				
				
				this.tabIndex = this.form.mode
				
				
				console.log(this.form, 'this。form')


			}







		},
		onUnload() {


			console.log('页面隐藏');
			// 在这里执行需要的操作
			this.isPlay = 1;

			this.isPlayVideo = 1;

			this.trialListenings(this.aiDubbingObj.voiceUrl);
			//播放音频
			this.trialListeningsVideo();

			this.isPlayTimbre = 1


			if (this.demoDub_url) {

				this.trialListeningsTimbre(this.demoDub_url);
			} else {
				this.isPlayTimbre = 2
			}


		},

		onHide() {
			// 页面隐藏时调用
			console.log('页面隐藏');
			// 在这里执行需要的操作
			this.isPlay = 1;

			this.isPlayVideo = 1;

			this.isPlayTimbre = 1
			//播放音频
			setTimeout(() => {
				this.trialListenings(this.aiDubbingObj.voiceUrl);
				//播放音频
				this.trialListeningsVideo()
			}, 500)


			if (this.demoDub_url) {

				this.trialListeningsTimbre(this.demoDub_url);
			} else {
				this.isPlayTimbre = 2
			}
		},

		methods: {
			async longpress(urls) {


				uni.showLoading({
					title: '下载中',
					mask: true,
				});
				uni.downloadFile({
					url: urls,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: r => {
									uni.hideLoading();

									this.$sun.toast('保存相册成功');
								},
								fail: e => {
									// console.log(res);
									if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail auth deny'
									) {

										uni.showModal({
											title: '您需要授权相册权限',
											success(res) {
												if (res
													.confirm) {
													uni.openSetting({
														success(
															res
														) {},
														fail(
															res
														) {
															// console.log(res);
														}
													});
												}
											}
										});
									} else if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail file not exists'
									) {

										uni.hideLoading();
										this.$sun.toast(
											'保存失败,视频文件不存在!', 'none'
										);
									} else {

										uni.hideLoading();
										console.log('err==>', e);
										this.$sun.toast('保存失败',
											'error');
									}
								}
							});
						} else {

							uni.hideLoading();
							this.$sun.toast('下载失败', 'error');
						}
					},
					fail: err => {
						uni.hideLoading();
						this.$sun.toast(err, 'error');
						this.isWhether = true;
					}
				});


			},
			keyWorderInput(e) {

				if (e) {
					console.log(e)

					this.tallyHotspot_tally = Number(this.tallySet.figure_tally) * Number(e)

				} else {
					this.tallyHotspot_tally = Number(this.tallySet.figure_tally)
				}

			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},

			async avatarListFn() {
				const result = await this.$http.post({
					url: this.$api.avatarList,
					data: {
						uid: uni.getStorageSync("uid"),




						is_status: 2,

					}
				});
				if (result.errno == 0) {
					this.avatarIdArr = this.form.avatar_id.split(',').map(Number)
					if (this.form.mode == 3) {
						this.avatarIdArr.forEach((item, index) => {

							let res = result.data.find(item1 => item == item1.id)
							console.log(res)
							if (res) {
								this.videoShowUrl = true
								this.digitalHumanArr.push(result.data[index])

							}

						})

						if (this.avatarIdArr.length != this.digitalHumanArr.length) {
							this.avatarIdArr = this.avatarIdArr.filter(item => this.digitalHumanArr.some(obj => obj
								.id === item));
						}

						this.videoNum = Number(this.digitalHumanArr.length) * Number(this.form.content.length)



					}
				}
			},
			async voiceSetDemoFn(voice_id, sound_id) {
				const result = await this.$http.post({
					url: this.$api.voiceSetDemo,
					data: {
						uid: uni.getStorageSync('uid'),

						voice_id: voice_id,
						sound_id: sound_id
					}
				});
				if (result.errno == 0) {
					console.log(result.data)

					this.stMusicUrl = result.data
					innerAudioContext2.src = result.data;
					console.log(innerAudioContext2)
					this.$forceUpdate()
					if (this.isPlayTimbre == 2) {
						this.isPlayTimbre = 1;
						innerAudioContext2.play();
						innerAudioContext2.onPlay(() => {
							console.log('开始播放');
						});
						innerAudioContext2.onEnded(() => {
							this.isPlayTimbre = 2;

							innerAudioContext2.pause();
							// this.$sun.toast("音频播放完成");
							console.log('音频播放结束：');
						});
						innerAudioContext2.onError(err => {
							innerAudioContext2.destroy();
							console.log('播放音频出错：', err);
						});
					} else {
						this.isPlayTimbre = 2;
						innerAudioContext2.pause();
						innerAudioContext2.onPause(() => {
							console.log('暂停播放');
						});
						console.log('暂停播放');
					}



				} else {
					this.$sun.toast(result.message, 'none');
				}
			},
			async soundSaveFn() {
				let totalDeduction = ((this.testContent[0].length / 100) * this.tallySet.sound_tally).toFixed(2);
				if (totalDeduction < 100) {
					totalDeduction = this.tallySet.sound_tally; // 如果次数小于100，直接扣50点
				}

				if (Number(this.user.balance) <= Number(totalDeduction)) {
					this.$sun.toast('每一百字扣 ' + this.tallySet.sound_tally + '算力,当前算力不足无法提交', 'none')
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				const result = await this.$http.post({
					url: this.$api.soundSave,
					data: {
						uid: uni.getStorageSync('uid'),
						type: 5,
						task_id:'',
						
						voice_id: this.form.voice_id,
						msg: this.testContent
					}
				});
				if (result.errno == 0) {
					console.log(this.form.voice_id, result.data)
					uni.hideLoading()
					this.voiceSetDemoFn(this.form.voice_id, result.data)


				} else {
					this.$sun.toast(result.message, 'none');
					uni.hideLoading()
				}
			},
			trialListeningsTimbre(url, ck) {



				if (!this.demoDub_url) {
					this.soundSaveFn()
				} else {
					innerAudioContext2.src = this.form.dub_url;
					console.log(innerAudioContext2)
					if (ck) {
						this.isPlayVideo = 2

						// 1.播放 2.停止播放
						this.isPlay = 2
					}
					this.$forceUpdate()
					if (this.isPlayTimbre == 2) {
						this.isPlayTimbre = 1;
						innerAudioContext2.play();
						innerAudioContext2.onPlay(() => {
							console.log('开始播放');
						});
						innerAudioContext2.onEnded(() => {
							this.isPlayTimbre = 2;

							innerAudioContext2.pause();
							// this.$sun.toast("音频播放完成");
							console.log('音频播放结束：');
						});
						innerAudioContext2.onError(err => {
							innerAudioContext2.destroy();
							console.log('播放音频出错：', err);
						});
					} else {
						this.isPlayTimbre = 2;
						innerAudioContext2.pause();
						innerAudioContext2.onPause(() => {
							console.log('暂停播放');
						});
						console.log('暂停播放');
					}
				}

			},


			digitalHumanFn(digitalHumanArr) {
				this.videoShowUrl = true
				console.log(digitalHumanArr)
				this.digitalHumanArr = JSON.parse(digitalHumanArr)

				this.avatarIdArr = this.digitalHumanArr.map((item) => {
					return item.id
				})

				this.form.avatar_id = this.avatarIdArr.length == 1 ? this.avatarIdArr[0] : this.avatarIdArr.join(',');
				console.log(this.form.avatar_id)


			},
			aiTimbreFuns(item) {
				this.aiTimbreObj = JSON.parse(item).aiTimbreObj
				console.log(this.aiTimbreObj, '=========================')

				this.form.voice_id = this.aiTimbreObj.id

				if (this.aiTimbreObj.demo) {
					this.form.dub_url = this.aiTimbreObj.demo;
					this.demoDub_url = true;
					innerAudioContext2.src = this.aiTimbreObj.demo;
				} else {
					this.form.dub_url = this.aiTimbreObj.voice_urls[0];
					this.demoDub_url = false
					innerAudioContext2.src = this.aiTimbreObj.voice_urls[0];
				}
				this.form.dub_voice = this.aiTimbreObj.name;

				this.$nextTick(() => {
					setTimeout(() => {
						console.log(innerAudioContext2.duration)

						this.$set(this.aiTimbreObj, 'duration', innerAudioContext2.duration);
						this.aiTimbreObj.duration = innerAudioContext2.duration

					}, 600)
				})
			},

			// 音色
			aITimbre() {
				this.$sun.navGo('/pages/digitalHuman/selectTimbre')
			},
			delDh(index) {
				uni.showModal({
					title: '是否确定要删除',
					content: '是否需要删除数字人形象',
					success: async (res) => {
						if (res.confirm) {

							this.digitalHumanArr.splice(index, 1);
							console.log(this.avatarIdArr)
							this.avatarIdArr.splice(index, 1);
							this.form.avatar_id = this.avatarIdArr.length == 1 ? this.avatarIdArr[0] : this
								.avatarIdArr.join(',');

							if (!this.form.avatar_id) {
								this.videoShowUrl = false
							}
							// 还要吧对应的
						} else if (res.cancel) {
							console.log(this.form.avatar_id, this.avatarIdArr)
						}
					}
				});
			},
			videoUpload() {
				this.$sun.navGo('/pages/digitalHuman/selCloneList')
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},

			payNow() {

				// this.multiLensList[this.selIndex].title = this.selIndexName
				this.$set(this.multiLensList[this.selIndex], 'title', this.selIndexName);

				this.form.lens_str[this.selIndex].name = this.selIndexName
				this.selIndexName = ''
				setTimeout(() => {
					this.selIndexName = ''
					this.$refs.serviceItemsPopup.close()
				}, 200)

			},
			edit(index) {
				this.selIndex = index

				this.$refs.serviceItemsPopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});
			},

			musicBgm() {
				if (this.form.bgm) {



					innerAudioContext2.src = this.form.bgm;


					this.$nextTick(() => {
						setTimeout(() => {

							console.log(innerAudioContext2.duration)
							this.$set(this.musicObj, 'audition_duration', innerAudioContext2.duration);
							// this.musicObj.audition_duration = 
						}, 1000)
					})





					this.showMusic = true


				}
			},
			async getVideoCountFn(projectId) {
				const result = await this.$http.get({
					url: this.$api.getVideoCountSc,
					data: {
						uid: uni.getStorageSync("uid"),
						resource_folder_id: projectId
					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					if (result.data) {
						this.videoNum = result.data

						if (this.form.video_count) {
							this.tallyHotspot_tally = Number(this.tallySet.keyword_tally) * Number(this.form
								.video_count)
						} else {
							this.tallyHotspot_tally = Number(this.tallySet.keyword_tally)
						}
					} else {

					}
				} else {

					this.$sun.toast(result.message, 'none')
				}
			},
			async getVideoCountFnM() {
				const result = await this.$http.post({
					url: this.$api.getMuchFragmentCount,
					data: {
						uid: uni.getStorageSync("uid"),
						dub: this.form.dub,
						lens_str: this.form.lens_str,
						type: 2,
						audio_type:this.form.audio_type,
						sound_id:this.form.sound_id

					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					if (result.data) {
						this.videoNum = result.data

						if (this.form.video_count) {
							console.log(e)

							this.tallyHotspot_tally = Number(this.tallySet.figure_tally) * Number(e)

						} else {
							this.tallyHotspot_tally = Number(this.tallySet.figure_tally)
						}
					} else {

					}
				} else {

					this.$sun.toast(result.message, 'none')
				}
			},


			trialListeningsVideo(ck) {

				innerAudioContext2.src = this.form.bgm ? this.form.bgm : this.musicObj?.play_url?.uri;
				console.log(innerAudioContext2)
				if (ck) {
					this.isPlay = 2

					// 1.播放 2.停止播放
					this.isPlayTimbre = 2
				}

				this.$forceUpdate()
				if (this.isPlayVideo == 2) {
					this.isPlayVideo = 1;
					innerAudioContext2.play();
					innerAudioContext2.onPlay(() => {
						console.log('开始播放');
					});
					innerAudioContext2.onEnded(() => {
						this.isPlayVideo = 2;

						innerAudioContext2.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');
					});
					innerAudioContext2.onError(err => {
						innerAudioContext2.destroy();
						console.log('播放音频出错：', err);
					});
				} else {
					this.isPlayVideo = 2;
					innerAudioContext2.pause();
					innerAudioContext2.onPause(() => {
						console.log('暂停播放');
					});
					console.log('暂停播放');
				}
			},
			trialListenings(url, ck) {
				this.previewUrl = url
				console.log(url)
				innerAudioContext2.src = this.previewUrl;
				console.log(innerAudioContext2)
				if (ck) {
					this.isPlayVideo = 2

					// 1.播放 2.停止播放
					this.isPlayTimbre = 2
				}
				this.$forceUpdate()
				if (this.isPlay == 2) {
					this.isPlay = 1;
					innerAudioContext2.play();
					innerAudioContext2.onPlay(() => {
						console.log('开始播放');
					});
					innerAudioContext2.onEnded(() => {
						this.isPlay = 2;

						innerAudioContext2.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');
					});
					innerAudioContext2.onError(err => {
						innerAudioContext2.destroy();
						console.log('播放音频出错：', err);
					});
				} else {
					this.isPlay = 2;
					innerAudioContext2.pause();
					innerAudioContext2.onPause(() => {
						console.log('暂停播放');
					});
					console.log('暂停播放');
				}
			},
			async folderPageFn(list) {
				// 查询 文件名字
				const result = await this.$http.post({
					url: this.$api.folderPage,
					data: {
						uid: uni.getStorageSync('uid'),
						type: 1,
						page: 1,
						psize: 30,

					}

				});
				if (result.errno == 0) {
					console.log(result.data)

					if (this.form.mode == 2) {
						this.multiLensList.forEach((item, index) => {

							let res = result.data.list.find(item1 => item.folder_id == item1.id)
							console.log(res)
							if (res) {
								// result.data.list.forEach((item,indexs)=>{
								// 	this.multiLensList[indexs].name = result.data.list[indexs].name
								// })
								this.multiLensList[index].name = res.name
							} else {
								this.multiLensList[index] = [{
									id: '',
									name: '',
									file_id: ''
								}]
								this.form.lens_str[index] = {
									folder_id: '',
									name: '',
									file_id: undefined
								}
							}

							this.multiLensList[index].title = this.form.lens_str[index].name

						})


					} else {
						result.data.list.forEach((item, index) => {



							if (item.id == this.form.resource_folder_id) {
								this.singleLensObj.title = result.data.list[index].name
							}

							if (!this.singleLensObj.title) {
								this.form.resource_folder_id = ''
							}

						})
					}








				} else {

					this.$sun.toast(result.message)
				}
			},


			async trialListening() {
				console.log(this.copyTypeInfo.content)

				console.log(Array.isArray(this.copyTypeInfo.content))

				const result = await this.$http.post({
					url: this.$api.aiComposite,
					data: {
						uid: uni.getStorageSync('uid'),
						voice: this.aiDubbingObj.voice,
						content: this.copyTypeInfo.content,
						task_id: this.copyTypeInfo.id,
						type: 3
					}

				});
				if (result.errno == 0) {
					console.log(result.data)
					this.form.dub = result.data

					this.form.id = this.copyTypeInfo.id



				} else {

					this.$sun.toast(result.message)
				}
			},
			nextPage() {
				// console.log(111)
				if (this.queryPage.psize * this.queryPage.page >= this.total) {
					return this.$sun.toast('亲 没有更多了~', 'none')
				} else {
					this.queryPage.page += 1
					console.log('掉接口')
				}
			},
			async stickersListFn() {
				const result = await this.$http.get({
					url: this.$api.stickersList,
					data: JSON.stringify({
						page: 1,
						limit: 10
					})

				});
				if (result.errno == 0) {
					console.log(result.data)
					this.stickersList = result.data

					if (this.form.sticker_value) {

						let index = this.stickersList.findIndex((item) => {
							return item.stickersUrl == this.form.sticker_value
						})
						console.log(index)
						if (index == -1) {
							this.stickerActive = 0
						} else {
							this.stickerActive = index
						}


					} else {
						this.form.sticker_value = result.data[0].stickersUrl
					}


					// this.$sun.toast(result.message)

				} else {

					this.$sun.toast(result.message)
				}
			},
			async captionListFn() {
				const result = await this.$http.get({
					url: this.$api.captionList,

				});
				if (result.errno == 0) {
					console.log(result.data)
					this.captionList = result.data



					if (this.form.caption_value) {

						let index = this.captionList.findIndex((item) => {
							return item.id == this.form.caption_value.id
						})
						console.log(index, 'caption_valueID')
						if (index == -1) {
							this.titleStyleActive = 0
						} else {
							this.titleStyleActive = index
						}

					} else {
						this.form.caption_value = {
							title: JSON.parse(result.data[0].title),
							captions: JSON.parse(result.data[0].captions),
							id: (result.data[0].id)
						}

					}



					// this.$sun.toast(result.message)

				} else {

					this.$sun.toast(result.message)
				}
			},
			async transitionListFn() {
				const result = await this.$http.get({
					url: this.$api.transitionList,

				});
				if (result.errno == 0) {
					console.log(result.data)
					this.transitionList = result.data

					if (this.form.transitions_value) {

						let index = this.transitionList.findIndex((item) => {
							return item.subtype == this.form.transitions_value
						})
						console.log(index)

						if (index == -1) {
							this.tiePaperActive = 0
						} else {
							this.tiePaperActive = index
						}


					} else {
						this.form.transitions_value = result.data[0].subtype
					}



					// this.$sun.toast(result.message)

				} else {

					this.$sun.toast(result.message)
				}
			},
			goRecharge() {
				this.$sun.navGo('/pages/contactUs/memberCenter')
			},

			otherFuns(groupArr) {
				console.log(groupArr)
				if (this.tabIndex == 2) {
					this.multiLensList[JSON.parse(groupArr).selIndex].name = JSON.parse(groupArr).title
					this.multiLensList[JSON.parse(groupArr).selIndex].id = JSON.parse(groupArr).projectId
					this.multiLensList[JSON.parse(groupArr).selIndex].file_id = JSON.parse(groupArr).file_id

					console.log(this.multiLensList)
					this.multiLensList = this.multiLensList

					this.form.lens_str = this.multiLensList.map((item, index) => {
						return {
							folder_id: item.id,
							name: '镜头' + (Number(index) + 1),
							file_id: item.file_id
						}
					})
					this.form.resource_folder_id = ''


				} else {
					console.log(groupArr)
					this.singleLensObj = JSON.parse(groupArr)
					this.form.resource_folder_id = this.singleLensObj.projectId
					this.form.lens_str = []
				}




			},
			aiDubbingFuns(item) {
				this.aiDubbingObj = JSON.parse(item).aiDubbingObj
				console.log(this.aiDubbingObj)

				this.form.dub_url = this.aiDubbingObj.voiceUrl;
				this.form.dub_voice = this.aiDubbingObj.voiceName;

				innerAudioContext2.src = this.aiDubbingObj.voiceUrl;
				this.$nextTick(() => {
					setTimeout(() => {
						console.log(innerAudioContext2.duration)
						this.$set(this.aiDubbingObj, 'duration', innerAudioContext2.duration);
					}, 500)
				})

				this.trialListening()
			},
			musicFuns(item) {
				this.isPlayVideo = 2;
				this.showMusic = true
				this.musicObj = JSON.parse(item).musicObj
				console.log(this.musicObj)

				this.form.bgm = this.musicObj.play_url.uri

				this.form.bgm_volume = JSON.parse(item).bgm_volume

				this.form.bgm_id = this.musicObj.title

			},


			selSolder(index, mode) {

				this.$sun.navGo('/pagesA/creatCenter/material/SelmaterialCenter', {
					index: index,
					type: 1,
					mode: mode
				})
			},
			//账号状态
			bindPickerChange2(e) {
				console.log("---->", e);

			},
			navBack() {
				uni.showModal({
					title: '退出数字人合成',
					content: '是否要退出数字人合成',
					success: async (res) => {
						if (res.confirm) {
							this.$sun.navBack()

						} else if (res.cancel) {

						}
					}
				});

			},
			async templateTpo() {

				if(uni.getStorageSync("templateSet").balance_change_template||uni.getStorageSync(
							"templateSet").generate_success_template||uni.getStorageSync(
							"templateSet").generate_fail_template){
					wx.requestSubscribeMessage({
						tmplIds: [uni.getStorageSync("templateSet").balance_change_template, uni.getStorageSync(
							"templateSet").generate_success_template, uni.getStorageSync(
							"templateSet").generate_fail_template],
						success: res => { //成功、
							if (res[Object.keys(res)[0]] == "accept") {
								console.log(res)
								// this.$sun.toast("成功订阅")
							} else {
								uni.showModal({
									title: "温馨提示",
									content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
								})
							}
						},
						fail: err => { //失败
							this.$sun.toast("订阅消息配置失败");
						}
					})
				}

			},
			zpFn(){
				setTimeout(() => {
					this.$sun.navSwitch('/pages/creatCenter/piecemeal/piecemealCenter')
				
				}, 500)
			},
			async videoNumBtn() {
				this.templateTpo()
				
					if (!this.form.name ) {

						this.$sun.toast('请输入任务名称', 'none')
						return
					}
					if (!this.form.video_count) {

						this.$sun.toast('请输入视频数量', 'none')
						return
					}

					if (this.videoNum < this.form.video_count) {

						this.$sun.toast('已超当前生成最大数量', 'none')
						return
					}


				


			

				

				uni.showLoading({
					title: '提交任务中...',
					mask: true
				});
				const result = await this.$http.post({
					url: this.$api.taskSave,
					data: {
						...this.form,
						content:[this.form.content]
					
					}

				});
				if (result.errno == 0) {
					console.log(result.data)
					uni.hideLoading()
					this.$refs.videoNum.close()
					this.$sun.toast(result.message)

					setTimeout(() => {
						this.$sun.navSwitch('/pages/creatCenter/piecemeal/piecemealCenter')

					}, 500)


				} else {
					uni.hideLoading()
					this.$sun.toast(result.message)
				}


				// this.$sun.navGo('/pages/creatCenter/piecemeal/piecemealCenterDetail')
			},
			closeVideoNum() {
				this.$refs.videoNum.close()
			},
			titleStyleSwitchFn(index, item) {
				this.titleStyleActive = index
				this.form.caption_value = {
					title: JSON.parse(item.title),
					captions: JSON.parse(item.captions),
					id: item.id
				}

			},
			tiePaperSwitchFn(index, item) {



				this.tiePaperActive = index
				this.form.transitions_value = item.subtype
			},
			stickerSwitchFn(index, item) {
				this.stickerActive = index
				this.form.sticker_value = item.stickersUrl
			},
			switch1Change(e, index) {
				console.log(e.detail.value, index)
				if (index == 1) {

					this.form.title_open = e.detail.value
					if (!e.detail.value) {
						this.form.title_value = ''
					}
				}
				if (index == 2) {
					this.form.transitions_open = e.detail.value
					if (!e.detail.value) {
						this.form.transitions_value = ''
					}
				}
				if (index == 3) {
					this.form.sticker_open = e.detail.value
					if (!e.detail.value) {
						this.form.sticker_value = ''
					}
				}
				if (index == 4) {
					this.form.caption_open = e.detail.value

					if (!e.detail.value) {
						this.form.caption_value = {}
					}
				}
			},
			previousStep(index) {
				this.current = index - 1
			},
			closeWriteOffIcon() {
				this.selIndexName = ''
				this.$refs.serviceItemsPopup.close()
			},
			CbutCk() {
				// 当前为是什么模式
				if (this.form.mode == 1) {
					this.getVideoCountFn(this.form.resource_folder_id)
				} else {
					this.getVideoCountFnM()
				}
				this.$refs.videoNum.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});
			},

			delMultiLens(index) {

				uni.showModal({
					title: '是否确定要删除',
					content: '删除内容，镜头' + Number(index + 1) + '，删除后无法恢复',
					success: async (res) => {
						if (res.confirm) {

							this.multiLensList.splice(index, 1);
						} else if (res.cancel) {

						}
					}
				});

			},
			AddLens() {
				let info = {
					id: 1,
					name: ''
				};
				this.multiLensList.push(info);
			},
			tabSwitch(index) {
				this.tabIndex = index
				this.form.mode = index

				if (index == 1) {
					// 多镜头
					this.multiLensList = [{
						id: 0,
						name: ''
					}]
					this.form.lens_str = []
					// 数字人口播
					this.form.avatar_id = '',
						// 数字人音色id
						this.form.voice_id = '',
						// 数字人声音id
						this.form.sound_id = ''



					this.form.avatar_id = ''

					this.form.voice_id = ''

					this.digitalHumanArr = []

					this.aiTimbreObj = {}

					this.videoShowUrl = false
					
					this.avatarIdArr=[]




				} else if (index == 2) {
					this.singleLensObj = {}
					this.form.resource_folder_id = ''

					// 数字人口播
					this.form.avatar_id = '',
						// 数字人音色id
						this.form.voice_id = '',
						// 数字人声音id
						this.form.sound_id = ''

					this.form.avatar_id = ''

					this.form.voice_id = ''

					this.digitalHumanArr = []

					this.aiTimbreObj = {}
					this.videoShowUrl = false
					this.avatarIdArr=[]
				} else {
					// 多镜头
					this.multiLensList = [{
						id: 0,
						name: ''
					}]
					this.form.lens_str = []



					this.singleLensObj = {}
					this.form.resource_folder_id = ''


				}
			},
			async but(index) {
				//  判断是否为多镜头是多镜头 那么最低需要选择4-9个镜头
			
				

						if (!this.form.avatar_id) {
							this.$sun.toast('请选择数字人形象', 'none')
						} else if (!this.form.voice_id) {
							this.$sun.toast('请选择数字人音色', 'none')
						}else if (!this.form.content) {
							this.$sun.toast('请输入数字人文案', 'none')
						} else {
							let totalDeduction
							
							if (this.form.content.length < 100) {
								totalDeduction = this.tallySet.sound_tally; // 如果次数小于100，直接扣50点
							}else{
								totalDeduction = ( Math.ceil(this.form.content.length / 100) * this.tallySet.sound_tally).toFixed(2);
							}

							if (Number(this.user.balance) <= Number(totalDeduction)) {
								this.$sun.toast('每一百字扣 ' + this.tallySet.sound_tally + '算力,当前算力不足无法提交', 'none')
								return
							}
							uni.showLoading({
								title: '提交任务中...',
								mask: true
							});

							console.log(this.form)
							const result = await this.$http.post({
								url: this.$api.soundSave,
								data: {
									uid: uni.getStorageSync("uid"),
									voice_id: this.form.voice_id,
									type: 5,
									task_id:'',
									msg: [this.form.content]
								}
							});
							if (result.errno == 0) {
								console.log(result.data)
								if (result.data) {
									this.form.sound_id = result.data
									uni.hideLoading()

									this.$refs.videoNum.show({
										anim: 'bottom',
										position: 'bottom',
										shadeClose: false, //false使用户不能点击其它关闭页面
										topclose: false,
										zIndex: 99999
									});

									this.videoNum = Number(this.digitalHumanArr.length) 
								}
							} else {
								uni.hideLoading()
								this.$sun.toast(result.message, 'none')
							}
						}

					
				
			},
			changeMusicFn() {
				this.$sun.navGo('/pagesA/creatCenter/piecemeal/changeMusic')
			},
			aiDubbing() {
				this.$sun.navGo('/pagesA/creatCenter/piecemeal/AiDubbing')
			},
			// 复制订单号
			paste(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '复制文案成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log(err)
						// 复制失败的回调
						uni.showToast({
							title: '复制文案失败',
							icon: 'error'
						});
					}
				});


			},


		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;

		.bordColor {
			border: 8rpx dotted #8d54f2;
			/* 必须设置 border 属性 */
			// width: 400rpx;
			// height: 400rpx;
			// border-image: linear-gradient(45deg, rgba(255, 218, 148, 1), rgba(179, 130, 255, 1)) 1;
			border-radius: 20rpx;
			/* 设置圆角 */

		}



		.upload-img-cls {
			width: 500rpx;
			position: relative;


			z-index: 99;
		}

		.upload-bj-cls {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;

			::v-deep .uni-icons {
				position: relative;
				right: 0;
				z-index: 9999
			}

			image {
				width: 84rpx;
			}

			view {
				color: rgb(141, 84, 242);
				font-size: 32rpx;
				font-weight: 600;
				margin: 26rpx 0 14rpx;
			}

			text {
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		::v-deep .uv-steps-item__wrapper {
			background-color: transparent !important
		}

		.titleStyleActive {
			width: 158rpx;
			height: 250.02rpx;
			box-sizing: border-box;
			border: 2rpx solid #9235FF;
			margin-right: 10rpx;
			margin-bottom: 10rpx;

		}

		.templateCenterImg {
			width: 158rpx;
			height: 250.02rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}

		.videoStyle {
			// width: 720rpx;
			// height: 1316rpx;
			border-radius: 20rpx;
			padding: 20rpx;

			background: rgb(255, 255, 255);

			.videoTitle {
				width: 680rpx;
				height: 76rpx;
				border-radius: 20rpx;

				background: rgb(242, 242, 242);
			}

			.tiePaper {
				width: 135.06rpx;
				height: 132.06rpx;
				box-sizing: border-box;
				border: 2rpx solid rgb(239, 239, 239);
				background: rgb(255, 255, 255);
				margin: 0 42rpx 20rpx 0;
				padding: 10rpx;

				.tiePaperImg {
					width: 95.22rpx;
					height: 89.28rpx;
				}

			}


			.tiePaperActive {
				margin: 0 42rpx 20rpx 0;
				padding: 10rpx;
				width: 135.06rpx;
				height: 132.06rpx;
				box-sizing: border-box;
				border: 2rpx solid #9235FF;
				background: rgb(255, 255, 255);

				.tiePaperImg {
					width: 95.22rpx;
					height: 89.28rpx;
				}
			}
		}



		.matrix-20 {
			width: 18rpx;
			height: 30rpx;
			margin-left: auto;
		}



		.list-public {
			padding: 30rpx;
			margin: 0;

			.digitalHumanImg {
				/* 矩形 5873 */
				width: 254.48rpx;
				height: 454rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;

			}

			.delImg {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				z-index: 999;
				left: 20rpx;
				top: 20rpx;




			}

			.input-name {
				width: 610rpx;
				padding: 20rpx;
				border: 2rpx solid #d9d9d9;
				border-radius: 10rpx;
			}

			.red-dot {
				color: #ff0000;
				margin-left: 10rpx;
			}

			.multiLensList {
				// width: 688rpx;
				// height: 116rpx;
				padding: 20rpx 20rpx;
				border-radius: 20rpx;

				background: rgb(248, 248, 248);

				.icon {
					width: 35rpx;
					height: 35rpx;
				}
			}

			.multiLensImg {
				width: 45.84rpx;
				height: 50rpx;
			}
		}

		.singleLens {
			border-radius: 20rpx 40rpx 20rpx 0rpx;
			background: linear-gradient(180.00deg, rgb(246, 238, 255), rgba(244, 245, 247, 0) 100%);
			width: 354rpx;
			position: relative;
			left: 3rpx;
			height: 113.18rpx;
		}

		.multiLens {
			width: 344rpx;
			height: 113.18rpx;
			border-radius: 40rpx 30rpx 0rpx 20rpx;
			position: relative;
			left: -3rpx;
			background: linear-gradient(180.00deg, rgb(246, 238, 255), rgba(244, 245, 247, 0) 100%);
		}

		.digitalPopulationBroadcast {
			width: 354rpx;
			height: 113.18rpx;
			border-radius: 40rpx 20rpx 40rpx 20rpx;
			position: relative;
			left: -3rpx;
			background: linear-gradient(180.00deg, rgb(246, 238, 255), rgba(244, 245, 247, 0) 100%);
		}

		.defaultLensRight {
			width: 354rpx;
			height: 113.18rpx;
			border-radius: 20rpx 20rpx 0rpx 20rpx;
			position: relative;
			left: -3rpx;
			background: linear-gradient(180.00deg, #fff, rgba(244, 245, 247, 0) 100%);
		}

		.line {
			/* 矩形 6048 */
			width: 70rpx;
			height: 10rpx;
			border-radius: 188rpx;

			background: rgba(179, 130, 255, 1);
		}

		.defaultLensLeft {
			width: 354rpx;
			height: 113.18rpx;
			border-radius: 20rpx 20rpx 0rpx 20rpx;
			position: relative;
			left: 3rpx;
			z-index: 999;
			background: linear-gradient(180.00deg, #fff, rgba(244, 245, 247, 0) 100%);
		}

		.list-public2 {
			// margin: 0 20rpx 20rpx;
			margin-top: 30rpx;
			padding: 20rpx 20rpx;
			position: relative;
			border-radius: 20rpx;
			background: rgb(250, 250, 250);
		}

		.opacity5 {
			opacity: 0.5;
		}

		.img-97 {
			width: 70%;
			height: 70%;
			animation: rotate 1.5s linear infinite; //图片旋转
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}


		.r-play {
			margin-right: 30rpx;
			width: 72rpx;
			height: 72rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			margin-left: auto;
		}


		.img-94 {
			width: 100%;
			height: 100%;
		}

		.r-date {
			margin-top: 20rpx;
			color: rgb(153, 153, 153);
			font-size: 26rpx;
		}

		.r-name {
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			font-weight: 600;
		}

		.try-listening-cls {
			color: rgb(255, 255, 255);
			font-size: 32rpx;
			border-radius: 180rpx;
			background: rgb(93, 124, 252);
			padding: 8rpx 22rpx;
		}

		.videoCopywriting {
			margin-top: 40rpx;


			box-sizing: border-box;
			border: 2rpx solid rgb(249, 249, 249);
			border-radius: 20rpx;
			padding: 20rpx;

			background: rgb(255, 255, 255);

			// 多行文本
			.textarea-box {
				// width: 630rpx;
				border-radius: 20rpx;
				background: #fff;
				padding: 30rpx 0;
				position: relative;
				// height: calc(100vh - 1120rpx);
				height: 27vh;

				.textareaTitle {
					position: absolute;
					top: 20rpx;
				}

				.textareaTitles {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					z-index: 999;
				}

				.textarea-color {
					color: #999;
				}

				::v-deep .textarea {
					padding-top: 30rpx !important;
				}

				.red-dot {
					color: #ff0000;
					margin-left: 10rpx;
				}
			}

			.copyImg {
				width: 25.34rpx;
				height: 25.34rpx;
			}



		}

		.AiDubbing {

			width: 128rpx;
			height: 138.26rpx;
			border-radius: 12rpx;
			color: #7200FF;

			background: rgb(249, 248, 255);

			.aiDubbingImg {
				width: 45rpx;
				height: 45rpx;
			}
		}

		.backgroundMusic {

			width: 699.98rpx;
			height: 152.84rpx;
			padding: 19rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(249, 249, 249);
			border-radius: 20rpx;

			background: rgb(255, 255, 255);

			.textOver {
				width: 300rpx !important;
			}

			.musicImg {
				width: 111.06rpx;
				height: 111.06rpx;
			}

			.downloadImg {
				width: 28rpx;
				height: 28rpx;
			}

			.changeMusic {
				border-radius: 20rpx;
				width: 187.06rpx;
				height: 84rpx;
				color: #fff;
				background: linear-gradient(82.59deg, rgb(100, 117, 255) 1.294%, rgb(116, 100, 255) 99.047%);

				.musicImg {
					width: 30rpx;
					height: 30rpx;
					margin-right: 8rpx;
				}
			}
		}

		.bgBtn {
			z-index: 999;
			position: fixed;
			bottom: 0;
			height: 192rpx;
			width: 100%;
			background-color: #f7f7f7;

			.c-but {

				font-weight: 700;

				padding: 20rpx 40rpx;

				// color: #ffffff;
				width: 61%;
				position: fixed;
				bottom: 40rpx;
				left: 32%;
				border: none;

				z-index: 999;


				border-radius: 20rpx;
				margin: 20rpx;
				text-align: center;
				font-size: 32rpx;
				height: 100rpx;
				margin-top: 30rpx;
				color: #ffffff;
				background: linear-gradient(90deg, #6475FF, #7464FF 100%);
			}

			.c-save {
				font-weight: 700;
				.videoImg{
					/* svg 48 */
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}

				padding: 20rpx 40rpx;

				// color: #ffffff;
				width: 29%;
				position: fixed;
				bottom: 40rpx;
				left: 0%;
				border: none;

				z-index: 999;


				border-radius: 20rpx;
				margin: 20rpx;
				text-align: center;
				font-size: 32rpx;
				height: 100rpx;
				margin-top: 30rpx;
				color: #000000;
				background: #fff;
			}
		}



		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}
	}
</style>